"use client"

import { useState } from "react"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import type { User } from "@/lib/mock-data"

interface UserCardProps {
  user: User
  showFollowButton?: boolean
}

export function UserCard({ user, showFollowButton = true }: UserCardProps) {
  const [isFollowing, setIsFollowing] = useState(false)

  const handleFollow = () => {
    setIsFollowing(!isFollowing)
  }

  return (
    <Card className="border border-gray-200">
      <CardContent className="p-4">
        <div className="flex items-center space-x-3">
          <Avatar className="h-12 w-12">
            <AvatarImage src={user.avatar || "/placeholder.svg"} alt={user.displayName} />
            <AvatarFallback>{user.displayName.charAt(0)}</AvatarFallback>
          </Avatar>

          <div className="flex-1 min-w-0">
            <div className="flex items-center space-x-1">
              <h3 className="font-semibold text-sm truncate">{user.displayName}</h3>
              {user.verified && (
                <div className="w-4 h-4 bg-blue-500 rounded-full flex items-center justify-center flex-shrink-0">
                  <span className="text-white text-xs">✓</span>
                </div>
              )}
            </div>
            <p className="text-xs text-gray-500">@{user.username}</p>
            <p className="text-xs text-gray-600 mt-1 line-clamp-2">{user.bio}</p>

            <div className="flex items-center space-x-4 mt-2">
              <span className="text-xs text-gray-500">
                <span className="font-semibold text-gray-900">{user.followers.toLocaleString()}</span> followers
              </span>
              <span className="text-xs text-gray-500">
                <span className="font-semibold text-gray-900">{user.posts}</span> posts
              </span>
            </div>
          </div>

          {showFollowButton && (
            <Button
              size="sm"
              variant={isFollowing ? "outline" : "default"}
              onClick={handleFollow}
              className="flex-shrink-0"
            >
              {isFollowing ? "Following" : "Follow"}
            </Button>
          )}
        </div>
      </CardContent>
    </Card>
  )
}
